{% extends get_theme() + "/common/header.html" %}

{% block title %}Flask - 标签文章 - PPress主题应用{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('main_static', filename='ppress/static/css/tag_posts.css') }}">
{% endblock %}

{% block content %}
<div class="tag-header">
    <div class="container">
        <div class="tag-info">
            {% if get_tag() %}
                {% set tag = get_tag() %}
            <h1 class="tag-title">{{ tag.title }}</h1>
            <p class="tag-description">{{ tag.desc }}</p>
            <div class="tag-meta">
                <span class="meta-item">
                    <i class="icon-tag"></i>
                    标签
                </span>
                <span class="meta-item">
                    <i class="icon-file"></i>
                    {{ tag.count }} 篇文章
                </span>
            </div>
            {% else %}
            {% endif %}
        </div>
    </div>
</div>

<!-- 文章列表区域 -->
<div class="article-list-container">
        <div class="row">
            <!-- 文章列表 -->
            <div class="col-md-8">
               <div class="article-list">
                    <!-- 模拟文章数据 -->
                    <article class="article-item">
                        <div class="article-image">
                            <a href="#">
                                <img src="http://127.0.0.1:5000/admin/static/upload/images/1.jpg" alt="Flask框架入门指南" class="img-responsive">
                            </a>
                        </div>

                        <div class="article-content">
                            <div class="article-header">
                                <h2 class="article-title">
                                    <a href="#">Flask框架入门指南：从零开始构建Web应用</a>
                                </h2>
                                <div class="article-meta">
                                    <span class="meta-item">
                                        <i class="icon-calendar"></i>
                                        2024-01-15
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-folder"></i>
                                        <a href="#">Python开发</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-tag"></i>
                                        <a href="#">Flask</a>, <a href="#">Python</a>, <a href="#">Web开发</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-eye"></i>
                                        1,234 阅读
                                    </span>
                                </div>
                            </div>

                            <div class="article-excerpt">
                                Flask是一个轻量级的Python Web框架，它提供了构建Web应用所需的基本功能。本文将详细介绍Flask的核心概念、安装配置、路由系统、模板引擎等基础知识，帮助初学者快速上手Flask开发...
                            </div>

                            <div class="article-footer">
                                <a href="#" class="read-more">
                                    阅读全文 <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </article>

                    <article class="article-item">
                        <div class="article-image">
                            <a href="#">
                                <img src="http://127.0.0.1:5000/admin/static/upload/images/c23e17c800df7bfa1147fec93eb32e5f.jpeg" alt="SQLAlchemy ORM详解" class="img-responsive">
                            </a>
                        </div>

                        <div class="article-content">
                            <div class="article-header">
                                <h2 class="article-title">
                                    <a href="#">SQLAlchemy ORM详解：Python数据库操作的最佳实践</a>
                                </h2>
                                <div class="article-meta">
                                    <span class="meta-item">
                                        <i class="icon-calendar"></i>
                                        2024-01-12
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-folder"></i>
                                        <a href="#">数据库</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-tag"></i>
                                        <a href="#">SQLAlchemy</a>, <a href="#">ORM</a>, <a href="#">数据库</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-eye"></i>
                                        856 阅读
                                    </span>
                                </div>
                            </div>

                            <div class="article-excerpt">
                                SQLAlchemy是Python中最强大的ORM框架之一，它提供了完整的数据库抽象层。本文将深入探讨SQLAlchemy的核心概念、模型定义、查询操作、关系映射等高级特性，帮助开发者掌握数据库操作的最佳实践...
                            </div>

                            <div class="article-footer">
                                <a href="#" class="read-more">
                                    阅读全文 <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </article>

                    <article class="article-item">
                        <div class="article-image">
                            <a href="#">
                                <img src="http://127.0.0.1:5000/admin/static/upload/images/36e94-2un9n.jpg" alt="前端开发趋势" class="img-responsive">
                            </a>
                        </div>

                        <div class="article-content">
                            <div class="article-header">
                                <h2 class="article-title">
                                    <a href="#">前端开发趋势：2024年最值得学习的技术栈</a>
                                </h2>
                                <div class="article-meta">
                                    <span class="meta-item">
                                        <i class="icon-calendar"></i>
                                        2024-01-10
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-folder"></i>
                                        <a href="#">前端开发</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-tag"></i>
                                        <a href="#">JavaScript</a>, <a href="#">React</a>, <a href="#">Vue</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-eye"></i>
                                        2,156 阅读
                                    </span>
                                </div>
                            </div>

                            <div class="article-excerpt">
                                随着Web技术的快速发展，前端开发领域涌现出许多新的框架和工具。本文将分析2024年前端开发的主要趋势，包括React 18的新特性、Vue 3的Composition API、TypeScript的普及等，为开发者提供技术选型的参考...
                            </div>

                            <div class="article-footer">
                                <a href="#" class="read-more">
                                    阅读全文 <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </article>

                    <article class="article-item">
                        <div class="article-image">
                            <a href="#">
                                <img src="http://127.0.0.1:5000/admin/static/upload/images/1.jpg" alt="Docker容器化部署" class="img-responsive">
                            </a>
                        </div>

                        <div class="article-content">
                            <div class="article-header">
                                <h2 class="article-title">
                                    <a href="#">Docker容器化部署：从开发到生产的完整流程</a>
                                </h2>
                                <div class="article-meta">
                                    <span class="meta-item">
                                        <i class="icon-calendar"></i>
                                        2024-01-08
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-folder"></i>
                                        <a href="#">DevOps</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-tag"></i>
                                        <a href="#">Docker</a>, <a href="#">容器化</a>, <a href="#">部署</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-eye"></i>
                                        1,789 阅读
                                    </span>
                                </div>
                            </div>

                            <div class="article-excerpt">
                                Docker已经成为现代应用部署的标准工具。本文将详细介绍Docker的基本概念、镜像构建、容器管理、网络配置、数据持久化等核心知识，并通过实际案例展示如何将应用从开发环境部署到生产环境...
                            </div>

                            <div class="article-footer">
                                <a href="#" class="read-more">
                                    阅读全文 <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </article>

                    <article class="article-item">
                        <div class="article-image">
                            <a href="#">
                                <img src="https://img.32r.com/uppic/20231122/2df27bd25f2a13d7bcfc4485eeab0089.jpg" alt="机器学习入门" class="img-responsive">
                            </a>
                        </div>

                        <div class="article-content">
                            <div class="article-header">
                                <h2 class="article-title">
                                    <a href="#">机器学习入门：Python数据科学实战指南</a>
                                </h2>
                                <div class="article-meta">
                                    <span class="meta-item">
                                        <i class="icon-calendar"></i>
                                        2024-01-05
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-folder"></i>
                                        <a href="#">机器学习</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-tag"></i>
                                        <a href="#">机器学习</a>, <a href="#">Python</a>, <a href="#">数据科学</a>
                                    </span>
                                    <span class="meta-item">
                                        <i class="icon-eye"></i>
                                        3,421 阅读
                                    </span>
                                </div>
                            </div>

                            <div class="article-excerpt">
                                机器学习是人工智能的核心技术之一，Python是机器学习领域最流行的编程语言。本文将介绍机器学习的基本概念、常用算法、数据处理方法，并通过实际项目演示如何使用Python进行机器学习开发...
                            </div>

                            <div class="article-footer">
                                <a href="#" class="read-more">
                                    阅读全文 <i class="icon-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </article>
                </div>
                
                <!-- 分页 -->
                <div class="pagination-container">
                    <nav aria-label="文章分页">
                        <ul class="pagination">
                            <li class="page-item disabled">
                                <span class="page-link">上一页</span>
                            </li>
                            <li class="page-item active">
                                <span class="page-link">1</span>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">2</a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="#">下一页</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="col-md-4">
                <div class="sidebar">
                    <!-- 分类目录 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">分类目录</h3>
                        <ul class="category-list">
                            <li>
                                <a href="#">
                                    Python开发
                                    <span class="count">(15)</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    前端开发
                                    <span class="count">(12)</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    数据库
                                    <span class="count">(8)</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    DevOps
                                    <span class="count">(6)</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    机器学习
                                    <span class="count">(10)</span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    移动开发
                                    <span class="count">(7)</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    
                    <!-- 标签云 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">标签云</h3>
                        <div class="tag-cloud">
                            <a href="#" class="tag-item active">Flask</a>
                            <a href="#" class="tag-item">Python</a>
                            <a href="#" class="tag-item">Django</a>
                            <a href="#" class="tag-item">JavaScript</a>
                            <a href="#" class="tag-item">React</a>
                            <a href="#" class="tag-item">Vue</a>
                            <a href="#" class="tag-item">SQLAlchemy</a>
                            <a href="#" class="tag-item">Docker</a>
                            <a href="#" class="tag-item">机器学习</a>
                            <a href="#" class="tag-item">数据科学</a>
                            <a href="#" class="tag-item">Web开发</a>
                            <a href="#" class="tag-item">API</a>
                            <a href="#" class="tag-item">微服务</a>
                        </div>
                    </div>
                    
                    <!-- 最新文章 -->
                    <div class="sidebar-widget">
                        <h3 class="widget-title">最新文章</h3>
                        <ul class="recent-posts">
                            <li>
                                <a href="#">
                                    Flask框架入门指南：从零开始构建Web应用
                                </a>
                                <span class="post-date">01-15</span>
                            </li>
                            <li>
                                <a href="#">
                                    Django vs Flask：选择适合你的Python Web框架
                                </a>
                                <span class="post-date">01-10</span>
                            </li>
                            <li>
                                <a href="#">
                                    Flask RESTful API开发：构建现代化的Web服务
                                </a>
                                <span class="post-date">01-08</span>
                            </li>
                            <li>
                                <a href="#">
                                    Flask扩展开发：创建自定义扩展
                                </a>
                                <span class="post-date">01-05</span>
                            </li>
                            <li>
                                <a href="#">
                                    Flask性能优化：提升Web应用性能的实用技巧
                                </a>
                                <span class="post-date">01-03</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    </div>
</div>

<!-- 日期选择器组件 -->
<div class="date-timeline-container">
    <div class="container">
        <div class="date-timeline">
            <!-- 左导航箭头 -->
            <div class="timeline-nav timeline-nav-left">
                <button class="nav-arrow" onclick="navigateTimeline('prev')">
                    <i class="icon-arrow-left"></i>
                </button>
            </div>
            
            <!-- 时间轴主体 -->
            <div class="timeline-main">
                <div class="timeline-line"></div>
                
                <!-- 时间节点 -->
                <div class="timeline-nodes">
                    <div class="timeline-node" data-date="2025-08-06">
                        <div class="node-dot"></div>
                        <div class="node-date">2025-08-06</div>
                    </div>
                    
                    <div class="timeline-node" data-date="2025-08-07">
                        <div class="node-dot"></div>
                        <div class="node-date">2025-08-07</div>
                    </div>
                    
                    <div class="timeline-node active" data-date="2025-08-08">
                        <div class="node-dot"></div>
                        <div class="node-indicator">
                            <i class="icon-triangle-up"></i>
                        </div>
                        <div class="node-date">2025-08-08</div>
                    </div>
                    
                    <div class="timeline-node" data-date="2025-08-09">
                        <div class="node-dot"></div>
                        <div class="node-date">2025-08-09</div>
                    </div>
                    
                    <div class="timeline-node" data-date="2025-08-10">
                        <div class="node-dot"></div>
                        <div class="node-date">2025-08-10</div>
                    </div>
                    
                    <div class="timeline-node" data-date="2025-08-11">
                        <div class="node-dot"></div>
                        <div class="node-date">2025-08-11</div>
                    </div>
                    
                    <div class="timeline-node future" data-date="today">
                        <div class="node-dot"></div>
                        <div class="node-date">今日</div>
                    </div>
                </div>
            </div>
            
            <!-- 右导航箭头 -->
            <div class="timeline-nav timeline-nav-right">
                <button class="nav-arrow" onclick="navigateTimeline('next')">
                    <i class="icon-arrow-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 日期选择器样式 -->
<style>
.date-timeline-container {
    padding: 40px 0;
    margin-top: 40px;
    border-top: 1px solid #eee;
}

.date-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.timeline-nav {
    flex: 0 0 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-arrow {
    background: none;
    border: none;
    color: #0073aa;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow:hover {
    background: rgba(0, 115, 170, 0.1);
    transform: scale(1.1);
}

.timeline-main {
    flex: 1;
    position: relative;
    margin: 0 20px;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #00d4ff 0%, #00d4ff 85%, transparent 85%);
    transform: translateY(-50%);
}

.timeline-nodes {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
}


.node-dot {
    width: 12px;
    height: 12px;
    background: #fff;
    border: 2px solid #00d4ff;
    border-radius: 50%;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    z-index: 3;
    position: relative;
    /* 圆点位于线条上方 */
    top: 24px;
}

.timeline-node.active .node-dot {
    width: 16px;
    height: 16px;
    background: #00d4ff;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.3);
    /* 激活状态的圆点也位于线条上方 */
    top: 24px;
}

.timeline-node.future .node-dot {
    border-style: dashed;
    background: transparent;
}



.node-indicator {
    position: absolute;
    top: -35px;
    color: #00d4ff;
    font-size: 12px;
    z-index: 3;
}

.node-date {
    font-size: 12px;
    color: #00d4ff;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    transition: all 0.3s ease;
    /* 日期文字位于线条下方 */
    margin-top: 15px;
}

.timeline-node.active .node-date {
    font-weight: 600;
    color: #fff;
    background: #00d4ff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    top: 24px;
}

.timeline-node:hover .node-date {
    color: #fff;
    background: #00d4ff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .date-timeline {
        flex-direction: column;
        gap: 20px;
    }
    
    .timeline-nav {
        flex: none;
        order: 2;
    }
    
    .timeline-main {
        order: 1;
        width: 100%;
        margin: 0;
    }
    
    .timeline-nodes {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .timeline-node {
        flex: 0 0 auto;
        margin: 0 5px;
    }
    
    .node-date {
        font-size: 10px;
    }
}
</style>

<!-- 日期选择器脚本 -->
<script>
let currentDateIndex = 2; // 默认选中 2025-08-08
const dates = ['2025-08-06', '2025-08-07', '2025-08-08', '2025-08-09', '2025-08-10', '2025-08-11', 'today'];

function navigateTimeline(direction) {
    const nodes = document.querySelectorAll('.timeline-node');
    
    if (direction === 'prev' && currentDateIndex > 0) {
        currentDateIndex--;
    } else if (direction === 'next' && currentDateIndex < nodes.length - 1) {
        currentDateIndex++;
    }
    
    updateActiveNode();
}

function updateActiveNode() {
    const nodes = document.querySelectorAll('.timeline-node');
    
    nodes.forEach((node, index) => {
        node.classList.remove('active');
        const indicator = node.querySelector('.node-indicator');
        if (indicator) {
            indicator.style.display = 'none';
        }
    });
    
    if (nodes[currentDateIndex]) {
        nodes[currentDateIndex].classList.add('active');
        const indicator = nodes[currentDateIndex].querySelector('.node-indicator');
        if (indicator) {
            indicator.style.display = 'block';
        }
    }
}

// 点击节点切换日期
document.addEventListener('DOMContentLoaded', function() {
    const nodes = document.querySelectorAll('.timeline-node');
    
    nodes.forEach((node, index) => {
        node.addEventListener('click', function() {
            currentDateIndex = index;
            updateActiveNode();
            
            // 这里可以添加日期切换的逻辑
            const date = this.getAttribute('data-date');
            console.log('选择的日期:', date);
        });
    });
    
    // 初始化激活状态
    updateActiveNode();
});
</script>
{% endblock %} 